<template>
  <div class="box">
    <div class="title">
      <h1>-这是标题-</h1>
      <ul>
        <li :class="n === 1 ? 'sel' : ''" v-on:click="n = 1">这是分类</li>
        <li :class="n === 2 ? 'sel' : ''" v-on:click="n = 2">这是分类</li>
        <li :class="n === 3 ? 'sel' : ''" v-on:click="n = 3">这是分类</li>
        <li :class="n === 4 ? 'sel' : ''" v-on:click="n = 4">这是分类</li>
        <li :class="n === 5 ? 'sel' : ''" v-on:click="n = 5">这是分类</li>
        <li :class="n === 6 ? 'sel' : ''" v-on:click="n = 6">这是分类</li>
      </ul>
    </div>
    <div class="product">
      <ul class="product_con" v-if="n === 1">
        <li>
          <img src="./pro1.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro1.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro1.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro1.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro1.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro1.png" alt="" />
          <p>这是产品名称</p>
        </li>
      </ul>
      <ul class="product_con" v-else-if="n === 2">
        <li>
          <img src="./pro2.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro2.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro2.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro2.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro2.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro2.png" alt="" />
          <p>这是产品名称</p>
        </li>
      </ul>
      <ul class="product_con" v-else-if="n === 3">
        <li>
          <img src="./pro3.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro3.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro3.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro3.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro3.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro3.png" alt="" />
          <p>这是产品名称</p>
        </li>
      </ul>
      <ul class="product_con" v-else-if="n === 4">
        <li>
          <img src="./pro4.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro4.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro4.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro4.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro4.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro4.png" alt="" />
          <p>这是产品名称</p>
        </li>
      </ul>
      <ul class="product_con" v-else-if="n === 5">
        <li>
          <img src="./pro5.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro5.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro5.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro5.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro5.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro5.png" alt="" />
          <p>这是产品名称</p>
        </li>
      </ul>
      <ul class="product_con" v-else>
        <li>
          <img src="./pro6.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro6.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro6.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro6.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro6.png" alt="" />
          <p>这是产品名称</p>
        </li>
        <li>
          <img src="./pro6.png" alt="" />
          <p>这是产品名称</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
.box {
  width: 1220px;
  height: 600px;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  .title {
    width: 240px;
    h1 {
      width: 100%;
      height: 110px;
      color: #fff;
      background: #317fff;
      line-height: 110px;
      text-align: center;
    }
    li {
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      color: #999;
    }
    .sel {
      color: #fff;
      background: #087fd2;
    }
  }
  .product {
    width: 960px;
    height: 100%;
    overflow: hidden;
    .product_con {
      li {
        width: 300px;
        float: left;
        background: #f7f7f7;
        border: 1px solid #f7f7f7;
        margin-right: 20px;
        box-sizing: border-box;
        margin-bottom: 35px;
        transition: all 0.3s linear;
        img {
          width: 100%;
        }
        p {
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          color: #333333;
        }
        &:hover {
          box-shadow: 0px 0px 15px #c6c6c6;
          transition: all 0.2s linear;
        }
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      n: 2,
    }
  },
}
</script>
